<template>
    <el-aside width="220px" class="image-aside" v-loading="loading">
        <div class="top">
            <AsideList 
                :active="activeId == item.id" 
                v-for="(item,index) in list" 
                :key="index"
                @click="handleChangeActiveId(item.id)" 
                @edit="handleUpdata(item)"
                @delete="handleDelete(item.id)"
            >
                {{ item.name }}
            </AsideList>
        </div>
        <div class="bottom">
            <el-pagination 
                background layout="prev, next" 
                :total="total" 
                :page-size="limit" 
                :current-page="currentPage"
                @current-change="getData"
            />
        </div>
    </el-aside>
    <FormDrawer ref="formDrawerRef" :title="drawerTitle" destoryOnClose @submit="handleSubmit">
        <el-form :model="form" ref="formRef" :rules="rules" label-width="80px" :inline="false">
            <el-form-item label="新增名称" prop="name">
                <el-input v-model="form.name" placeholder="名称"></el-input>
            </el-form-item>
            <el-form-item label="排序" prop="order">
                <el-input-number v-model="form.order" :min="0" :max="1000" />
            </el-form-item>
        </el-form>
    </FormDrawer>
</template>

<script setup>
import { computed, reactive, ref } from 'vue'
import AsideList from './AsideList.vue'
import { getImageClassList,createImageClass,updateImageClass,deleteImageClass } from '~/api/image_class'
import FormDrawer from './FormDrawer.vue'
import { toast } from '~/composables/util'


// 初始化加载动画
const loading = ref(false)
// 定义数组用于接收数据
const list = ref([])
// 设置默认激活状态
const activeId = ref(0)

// 为父组件提供方法并传递数据
const emit = defineEmits(['change'])

// 增加方法,点击可以进行切换激活状态
const handleChangeActiveId = (id) => {
    activeId.value = id
    // 通知父组件我传递消息了并传递id值过去
    emit('change',id)
}

// 响应式当前页面
const currentPage = ref(1)
// 总页数
const total = ref(0)
// 每页显示条数
const limit = ref(10)
// 修改或新增的对应id值
const editId = ref(0)
// 响应式抽屉的标题
const drawerTitle = computed(() => editId.value ? '修改' : '新增')

// 接收子组件传过来的参数(包括方法)
const formDrawerRef = ref(null)

// 初始化表单数据
const form = reactive({
    name:'',
    order:50
})
const formRef = ref(null)

// 定义表单校验规则
const rules = {
    name:{
        required:true,
        message:'名称不可以为空',
        trigger:'blur'
    }
}

// 获取数据方法
function getData(p=null){
    // 显示加载动画
    loading.value = true
    // 判断是否传入了参数且为整数
    if(typeof p == 'number'){
        currentPage.value = p
    }
    getImageClassList(currentPage.value).then(res => { 
        // console.log(res)
        // 赋值给list和total
        list.value = res.data.list
        total.value = res.data.totalCount
        // 默认找到第一个数据
        let item = list.value[0]
        if(item){
            // 赋值激活状态
            handleChangeActiveId(item.id)
        }
    }).finally(() => {
        // 最后隐藏加载动画
        loading.value = false
    })
}

// 调用函数
getData()

// 抽屉点击提交的方法
const handleSubmit = () => {
    formRef.value.validate((valid) => {
        // 判断表单是否合法
        if(!valid){
            return false
        }
        // 使得按钮进行加载-禁用
        formDrawerRef.value.openLoading()
        // 发送请求-这里需要进行判断是新增还是修改,根据editId的值进行判断
        const fun = editId.value ? updateImageClass(editId.value,form) : createImageClass(form)
        fun.then(res => {
            toast(drawerTitle.value + '成功')
            // 根据修改还是新增来渲染页面
            getData(editId.value ? currentPage.value : 1)
        }).finally(() => {
            // 使得按钮恢复
            formDrawerRef.value.closeLoading()
            // 关闭抽屉
            formDrawerRef.value.close()
        })
    })
}

// 打开抽屉方法-新增事件
const handleCreate = () => {
    editId.value = 0
    // 清空表单数据
    form.name = ''
    form.order = 50
    // 显示抽屉
    formDrawerRef.value.open()
}

// 修改事件
const handleUpdata = (row) => {
    editId.value = row.id
    // 赋值给表单数据
    form.name = row.name
    form.order = row.order
    // 打开抽屉
    formDrawerRef.value.open()
}

// 删除事件
const handleDelete = (id) => {
    // 显示加载动画
    loading.value = true
    deleteImageClass(id).then(res => {
        toast('删除成功')
        // 刷新数据
        getData()
    }).finally(() => {
        // 最后隐藏加载动画
        loading.value = false
    })
}

// 把方法暴露出去,给外层父组件
defineExpose({
    handleCreate
})

</script>

<style scoped>
.image-aside{
    border-right: 1px solid #eeeeee;
    position: relative;
}
.image-aside .top{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 50px;
  overflow-y: auto;
}
.image-aside .bottom{
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 50px;
  @apply flex items-center justify-center;
}
</style>
